<template>
  <div class="wrap">
  	<!-- header -->
  	<header>
		<div class="carousel">
			<swiper auto loop dots-position='center' height='1.3rem'>
				<swiper-item><img src="../assets/01.jpg" /></swiper-item>
				<swiper-item><img src="../assets/2.jpg" /></swiper-item>
				<swiper-item><img src="../assets/3.jpg" /></swiper-item>
				<div class="carText"><strong>千万宠爱  专业呵护</strong><p>我们为您的宠物提供一个非常热情友好的环境。</p></div>
		  </swiper>
		</div> 
	</header>
  	
  	<!-- content -->
  	<div class="index-content">
		
		<div class="about">
			<div class="title">
				<p>关于我们</p>
				<img src="../assets/xhx_01.jpg" alt="" />
			</div>
			<div class="about_content">
				<div class="introduce">
					<p>现在我们有多年培养萌宠经验，我们的专业团队确保您的宠物总是最高水平的护理，因为我们对所有的宠物就像自己的一家人一样。</p>
					<img src="../assets/image1.jpg" alt="" />
					<router-link to="/about" class="btn">VIEW MORE</router-link> 
				</div>
				<div class="introduce2">
					<ul>
						<li>
							<img src="../assets/icon1.png" class="about_pic" alt="" />
							<div class="desc">
								<p class="desc_title">高级美容师</p>
								<p>我们的专业团队提供特殊的美容服务，宠物美容对宠物的健康大有益处。</p>
							</div>
						</li>
						<li>
							<img src="../assets/icon2.png" class="about_pic" alt="" />
							<div class="desc">
								<p class="desc_title">贵宾服务</p>
								<p>给您的宠物个性化服务，提供宠物用品；猫、狗洁净用品；其他小动物附属用品</p>
							</div>
						</li>
						<li>
							<img src="../assets/icon3.png" class="about_pic" alt="" />
							<div class="desc">
								<p class="desc_title">我们爱每一个宠物</p>
								<p>它们不仅仅是宠物更是家人，我们还有专业团体，包括兽医助理和接待员</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		
		<div class="series">
			<div class="title">
				<p>我们的服务</p>
				<img src="../assets/xhx_01.jpg" alt="" />
			</div>
			<div class="series_content">
				<div class="server">
					<div class="ser_title">
						<img src="../assets/icon1_03.png" alt="" />
						<span>梳理美容</span>
					</div>
					<div class="desc">
						<p>你的宠物与我们在可靠的人手中，让你的宠物喜欢的放心的保健中心。</p>
					</div>
				</div>
				<div class="server">
					<div class="ser_title">
						<img src="../assets/icon2_03.png" alt="" />
						<span>宠物清洗</span>
					</div>
					<div class="desc">
						<p>我们使用一个不同的洗发水沐浴露根据不同类型和品种来清洗。</p>
						<img src="../assets/image2.jpg" class="server_pic" alt="" />
					</div>
				</div>
				<div class="server">
					<div class="ser_title">
						<img src="../assets/icon3_03.png" alt="" />
						<span>宠物造型</span>
					</div>
					<div class="desc">
						<p>我们的团队的宠物发型师很乐意让你的动物看起来很快乐。</p>
					</div>
				</div>
				<div class="server">
					<div class="ser_title">
						<img src="../assets/icon4_03.png" alt="" />
						<span>宠物医疗</span>
					</div>
					<div class="desc">
						<p>专业团体，包括兽科技术员，兽医助理和接待员．全部受过处理急症所需要的训练。</p>
					</div>
				</div>
				<div class="list">
					<ul>
						<li><img src="../assets/zp2_05.jpg" alt="" /></li>
						<li><img src="../assets/zp7_03.jpg" alt="" /></li>
						<li><img src="../assets/zp3_09.jpg" alt="" /></li>
						<li><img src="../assets/zp6_03.jpg" alt="" /></li>
						<li><img src="../assets/zp8_03.jpg" alt="" /></li>
						<li><img src="../assets/zp5_07.jpg" alt="" /></li>
					</ul>
				</div>
			</div>
		</div>
		
		<div class="product">
			<div class="title">
				<p>产品中心</p>
				<img src="../assets/xhx_01.jpg" alt="" />
			</div>
			<div class="product_content">
				<ul>
					<li>
						<router-link to="/proList"><img src="../assets/96_ba8i.png" alt="" /></router-link>
						<router-link to="/proList">职业夹克装</router-link>
					</li>
					<li>
						<router-link to="/proList"><img src="../assets/86_mcj8.png" alt="" /></router-link>
						<router-link to="/proList">职业夹克装</router-link>
					</li>
					<li>
						<router-link to="/proList"><img src="../assets/87_kefk.png" alt="" /></router-link>
						<router-link to="/proList">职业夹克装</router-link>
					</li>
					<li>
						<router-link to="/proList"><img src="../assets/88_qo13.png" alt="" /></router-link>
						<router-link to="/proList">职业夹克装</router-link>
					</li>
					<li>
						<router-link to="/proList"><img src="../assets/89_9k3a.png" alt="" /></router-link>
						<router-link to="/proList">职业夹克装</router-link>
					</li>
					<li>
						<router-link to="/proList"><img src="../assets/90_fsq6.png" alt="" /></router-link>
						<router-link to="/proList">职业夹克装</router-link>
					</li>
				</ul>
				<div class="appraise">
					<div class="info">
						<p class="info_title">上海李小姐：</p>
						<p>我们家的狗狗（嘟嘟）得了犬瘟。听朋友们说宠物看病一定要去大一点的宠物医院去看病，前三天是一家，后四天又换了一家。主要是因为疗效不行才换的。那里不错。我也是抱着试试的态度去看看，死马当活马医吧。</p>
						<p>医院不太大，卫生绝对是可以的，基本闻不到动物的BB味。我就接受了一位姓吕的老大夫的建议，治疗了几天，现在恢复的很好，基本康复了，太感谢吕医生了！</p>
					</div>
				</div>
			</div>
		</div>
		
		<div class="team">
			<div class="title">
				<p>专家团队</p>
				<img src="../assets/xhx2_03.jpg" alt="" />
			</div>
			<div class="team_content">
				<ul>
					<li>
						<img src="../assets/td1.jpg" alt="" />
						<div class="desc">
							<p>王医生</p>
							<p>3年宠物医生经验</p>
						</div>
					</li>
					<li>
						<img src="../assets/td1.jpg" alt="" />
						<div class="desc">
							<p>李医生</p>
							<p>5年宠物医生经验</p>
						</div>
					</li>
					<li>
						<img src="../assets/td1.jpg" alt="" />
						<div class="desc">
							<p>许医生</p>
							<p>8年宠物医生经验</p>
						</div>
					</li>
				</ul>
				<router-link to="/team" class="btn">VIEW MORE</router-link>
			</div>
		</div>
		
		<div class="news">
			<div class="title">
				<p>新闻中心</p>
				<img src="../assets/xhx_01.jpg" alt="" />
			</div>
			<div class="news_content">
				<ul>
					<li>
						<router-link to="" class="news_title">注意青春期高血压</router-link>
						<p class="time">2014-10-08</p>
						<p class="desc">当人进入青春发育期，也就是十三、四岁时，其血压已开始接近成年人，如处于安静状态时，血压高于140/90毫米汞柱，就可以认为是血压偏高，被认为青春期......</p>
					</li>
					<li>
						<router-link to="" class="news_title">正确使用电子血压计应注意哪些问题？</router-link>
						<p class="time">2014-10-08</p>
						<p class="desc">一是每个人的血压在一天之内的变化很大。严格来说，人每一时刻的血压是不一样的，它是随着人的心理状态、时间、季节、气温的变化以及测量的部位（臂或腕）、体位（坐或卧）......</p>
					</li>
					<li>
						<router-link to="" class="news_title">看不懂的化验单</router-link>
						<p class="time">2014-10-13</p>
						<p class="desc">随着医学技术的发展，在医疗过程中进行的化验项目越来越多，它对诊断疾病起着重要的作用。因此，无论是医生还是患者，对于化验结果都很重视。</p>
					</li>
					<li>
						<router-link to="" class="news_title">高血压病的危险因素有哪些</router-link>
						<p class="time">2014-10-13</p>
						<p class="desc">1.高钠盐饮食 盐与高血压有关的主要证据，来自人群间的比较研究。限制高血压病人摄钠（食盐与含钠食品）则血压下降，服用利尿剂、排钠利水，血压也下降。在某些钠摄......</p>
					</li>
					<li>
						<router-link to="" class="news_title">新一代出版人以全新商业模式运作图书</router-link>
						<p class="time">2014-10-12</p>
						<p class="desc">读客 闯入出版业的“野蛮人” 　　这是行业，不是圈子。这是生意，不是沙龙 　　本刊记者 刘欣然 张欢 发自北京 广州 　　很长时间里图书都更被......</p>
					</li>
					<li>
						<router-link to="" class="news_title">运动预防糖尿病</router-link>
						<p class="time">2014-10-08</p>
						<p class="desc">随着医学技术的发展，在医疗过程中进行的化验项目越来越多，它对诊断疾病起着重要的作用。因此，无论是医生还是患者，对于化验结果都很重视。</p>
					</li>
				</ul>
			</div>
		</div>
		
  	</div>
  	
  	<!-- footer -->
  	<footerV></footerV>
  </div>
</template>

<script>
import { Swiper, SwiperItem } from 'vux'
import footer from './public/footer'
export default {
	components: {
		footerV : footer,
		Swiper,SwiperItem
	},
	data () {
		return {
			
		}
	},
	methods : {
		
	}
}
	
</script>


<style type="text/css" scoped="scoped">
	/* index.style */
	
	header {padding-bottom: 0.2rem;}
	header li{clear:both; }
	.carousel{clear:both; height:1.3rem; position:relative;}
	.carousel img{width:100%; height:1.3rem;}
	.vux-slider > .vux-indicator > a > .vux-icon-dot.active{background-color:#fff !important; border:0.01rem solid #000;border-radius:0.04rem !important;}
	.carousel .carText{position:absolute; color:#fff; z-index: 99; width:3rem; height:0.72rem; margin:12% 3%; padding-top: 0.1rem;}
	.carousel .carText p{margin:0.04rem auto; line-height: 0.25rem;}
	.carousel .carText strong{font-size: 0.18rem;}
	.vux-slider .vux-indicator a .vux-icon-dot{width:0.06rem !important; height:0.06rem !important; border-radius:0.04rem !important;background-color:#000 !important; border:0.01rem solid #fff;}

	.about .introduce{padding: 0 0.1rem; color: rgb(102, 102, 102); margin-bottom: 0.3rem; text-align: center; line-height: 0.25rem;}
	.about .introduce img{width: 2.42rem; height: 1.62rem; margin: 0.1rem auto;}
	.index-content .btn{display: block; width: 1.4rem; height: 0.36rem; background: rgba(246,171,74,1); border-radius: 0.3rem; color: #fff; line-height: 0.36rem; margin: 0 auto; font-size: 0.13rem;}
	.about .introduce2{background:url('../assets/background.jpg');padding: 0.34rem 0.1rem 0.1rem; color: #fff;}
	.about .introduce2 .about_pic{width: 0.65rem; height: 0.65rem; float: left; margin-right: 0.1rem;}
	.about .introduce2 li{margin-bottom: 0.3rem; overflow: hidden; line-height: 0.2rem;}
	.about .introduce2 .desc_title{font-size: 0.18rem; margin-bottom: 0.1rem;}
	
	.series{text-align: center; padding: 0 0.1rem; overflow: hidden;}
	.series .server{margin-bottom: 0.4rem;}
	.series .ser_title img{width: 0.46rem; height: 0.46rem; vertical-align: middle; margin-right: 0.1rem;}
	.series .ser_title span{font-size: 0.16rem; color: rgb(51, 51, 51);}
	.series .desc{color:rgb(102, 102, 102); line-height: 0.2rem; margin-top: 0.1rem;}
	.series .server_pic{width:2.21rem; height: 3.08rem; margin-top: 0.2rem;}
	.series .list li{width:48.2%;float: left; margin-bottom: 0.1rem;}
	.series .list li:nth-of-type(2n){margin-left: 0.1rem;}
	.series .list img{width: 100%; }
	
	.product .appraise{overflow:hidden; clear:both; background:url('../assets/2.jpg') center top no-repeat; background-size:6.24rem 2rem !important; margin-bottom:0.2rem;}
	.product ul{padding: 0 0.1rem;}
	.product li{width: 48.2%; float: left; margin-bottom: 0.1rem; text-align: center;}
	.product li:nth-of-type(2n){margin-left: 0.1rem;}
	.product li img{width: 100%;}
	.product li a{color: #5A5A5A; line-height: 0.2rem; display:block;}
	.product li a:hover{color:rgb(0,100,214);}
	.product .appraise .info{font-size:0.14rem; width:85%; margin:0 auto; padding:0.2rem 0.12rem; background:rgba(247, 243, 231,.8); margin-top:1.6rem;}
	.product .info .info_title{color:#000; font-size:0.18rem; margin-bottom:0.2rem;}
	.product .info p{color:rgb(102, 102, 102); line-height:0.3rem;}

	.team{padding:0.3rem 0.1rem; background-size:100% 100% !important; overflow:hidden; text-align:center; background:url('../assets/background.jpg') no-repeat;}
	.team .title p{color:#fff;}
	.team li img{width:100%;}
	.team .desc p{margin:0.2rem auto;}
	.team .desc p:nth-of-type(1){font-size:0.2rem; color:#fff;}
	.team .desc p:nth-of-type(2){font-size:0.13rem; color:rgb(204, 204, 204);}
	.team .content .btn{margin:0.3rem auto 0;}

	.news{padding:0.2rem 0.1rem;}
	.news li{border-bottom:0.01rem solid #e2e2e2; margin-bottom:0.1rem;padding-bottom:0.1rem;}
	.news li .news_title{color:#5a5a5a; font-size:0.14rem;}
	.news li .news_title:hover{color:#ff9900;}
	.news li .time{color:#929292; line-height:0.25rem;}
	.news li .desc{color:#999;}
</style>
